<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in configArr"
        :key="index"
        :label="item.label"
        :name="item.type"
      >
      </el-tab-pane>
    </el-tabs>
    <el-row v-loading="loading">
      <el-col :span="12">
        <tabsCon
          ref="tabsCon"
          @giveConfiguration="giveConfiguration"
          @clearValidateForm="clearValidateForm"
          :activeTabName="activeName"
        />
      </el-col>
      <el-col :span="10">
        <dynamicForm ref="dynamicForm" @handleSave="handleSave" />
      </el-col>
      <el-col :span="2"> </el-col>
    </el-row>
  </div>
</template>

<script>
import { getConfigArr, editConfig, addConfig } from "@/api/config";
import dynamicForm from "@/components/Dynamicform/mini.vue";
import { availableArr } from "@/utils/config-type";
import tabsCon from "./components/tabs.vue";
export default {
  name: "config",
  components: {
    dynamicForm,
    tabsCon,
  },
  data() {
    const availableArrData = availableArr;
    return {
      availableArr: availableArrData,
      configArr: [],
      activeName: "",
      configuration: {},
      loading: true,
      formData: {},
    };
  },
  mounted() {
    // console.log(this.availableArr);
    this.requestConfigArr("init");
  },
  methods: {
    async handleSave(formData) {
      // 校验tab的表单
      const result = await this.$refs.tabsCon.validateForm();
      if (result) {
        let query = {
          ...result,
        };
        query.configuration = formData;
        let requestWay;
        switch (query.isonline) {
          case true:
            requestWay = editConfig;
            break;
          case false:
            requestWay = addConfig;
            break;
          default:
            requestWay = addConfig;
            break;
        }
        delete query.createTime;
        delete query.updateTime;
        delete query.isonline;
        requestWay(query)
          .then((res) => {
            if (res.success) {
              this.$message.success("保存成功");
              this.requestConfigArr("init");
            } else {
              this.$message.error("保存失败");
            }
          })
          .catch((err) => {});
      }
    },
    clearValidateForm() {
      this.$refs.dynamicForm.clearValidateForm();
    },
    requestConfigArr(type) {
      getConfigArr()
        .then((res) => {
          this.configArr = res?.data ?? [];
          this.configArr.map((item) => {
            this.availableArr.map((tig) => {
              if (item.type === tig.key) {
                item.label = tig.label;
              }
            });
          });
          if (type === "init") {
            this.activeName = this.configArr[0].type;
            this.linkstart();
          }
        })
        .catch((err) => {});
    },
    handleClick(tab, event) {
      this.linkstart();
    },
    linkstart() {
      this.loading = true;
      let config = {};
      let isSingle;
      this.availableArr.map((item) => {
        if (this.activeName === item.key) {
          config = item.config;
          isSingle = item.isSingle;
        }
      });
      this.$refs.dynamicForm.getConfigType(config);
      this.$refs.tabsCon.requestConfigMsg(this.activeName, isSingle);
    },
    giveConfiguration(configuration) {
      this.configuration = configuration;
      this.loading = false;
      this.$refs.dynamicForm.giveFormData(this.configuration);
    },
  },
};
</script>

<style lang="scss" scoped></style>
